<!DOCTYPE html>
<html>
<head>
   <title>JavaScript Game Development Using EaseJS</title>


    <script type="text/javascript" src="js/easeljs/geom/Matrix2D.js"></script>
    <script type="text/javascript" src="js/easeljs/geom/Rectangle.js"></script>
	<script type="text/javascript" src="js/createjs/events/Event.js"></script>
    <script type="text/javascript" src="js/createjs/events/EventDispatcher.js"></script>

    <script type="text/javascript" src="js/easeljs/utils/UID.js"></script>
    <script type="text/javascript" src="js/easeljs/utils/Ticker.js"></script>
    <script type="text/javascript" src="js/easeljs/utils/SpriteSheetUtils.js"></script>

    <script type="text/javascript" src="js/easeljs/display/DisplayObject.js"></script>
    <script type="text/javascript" src="js/easeljs/display/Container.js"></script>
    <script type="text/javascript" src="js/easeljs/display/Stage.js"></script>
    <script type="text/javascript" src="js/easeljs/display/SpriteSheet.js"></script>
    <script type="text/javascript" src="js/easeljs/display/BitmapAnimation.js"></script>

    <script type="text/javascript">
        var stage, player, playerImage, _action;
        var playerW = 65;
		var playerH = 75;
        var frequency = 4;

        function init() {
            playerImage = new Image();
            playerImage.src = "assets/player.jpg";
			alert(playerImage.src);
            playerImage.onload = start;
			alert("done");
        }

        function id(id) {
            return id === null || id === undefined ? alert("Please provide element id") : document.getElementById(id);
        }

        function start() {
		alert("start1");
            stage = new createjs.Stage(document.getElementById("gameCanvas"));
			alert("start2");
            var playerSprite = new createjs.SpriteSheet({
                "animations":
                {
                    "walk": [0, 10, null, frequency]
                },
                images: ["assets/player.jpg"],
                frames:
                    {
                        height: playerH,
                        width: playerW,
                        regX: 0,
                        regY: 0,
                    }
            });
		alert(playerSprite);

            var fps = parseInt(id("fps").value);
            var velocity = parseInt(id("velocity").value);

            player = new createjs.Sprite(playerSprite,"walk");
            player.x = id("gameCanvas").width / 2;
            player.y = id("gameCanvas").height - playerH;
            player.vX = velocity;
            player.gotoAndPlay("walk");
              alert("na3m");
            stage.addChild(player);

            createjs.Ticker.setFPS(fps);
            createjs.Ticker.addEventListener("tick", tick);
        }

        function tick() {
            stage.update();
        }

        function play(action) {
            player.gotoAndPlay(action);
        }

        function showRangeValue(_id, value) {
            id("lbl" + _id).innerHTML = value;

            switch (_id) {
                case "fps":
                    createjs.Ticker.setFPS(parseInt(value));
                    break;
                case "velocity":
                    player.vX = parseInt(value);
                    break;
                case "frequency":
                    frequency = parseInt(value);
                    start();
                    break;
            }
        }

    </script>
</head>
<body style="margin-left: 50px;" class="metrouicss" onload="init();">

    <header id="header">
        <h1>Part 2</h1>
    </header>
    <section data-role="controls">
        <div>
            <button id="btnWalk" onclick="play('walk');">Walk</button>
        </div>
        <div>
            <div>FPS</div>
            <input type="range" onchange="showRangeValue('fps', this.value)" value="60" id="fps" min="1" max="60" />
            <span id="lblfps">60</span>
        </div>
        <div>
            <div>Velocity</div>
            <input type="range" onchange="showRangeValue('velocity', this.value)" value="2" id="velocity" min="1" max="10" />
            <span id="lblvelocity">2</span>
        </div>
        <div>
            <div>Frequency</div>
            <input type="range" onchange="showRangeValue('frequency', this.value)" value="4" id="frequency" min="1" max="10" />
            <span id="lblfrequency">4</span>
        </div>


    </section>
    <article style="border-top-width: 4px; border-bottom-width: 4px; border-top-style: double; border-bottom-style: double; border-top-color: #E1A60A; border-bottom-color: #E1A60A; padding: 8px 0px;">
        <canvas id="gameCanvas" width="600" height="100"></canvas>
    </article>
    <button  id="btnstart"  onclick="Start()">
        <img src="Images/play.png" width="50" height="50" />  
    </button>
   
    <button id="btnExit"  onclick="Exit()" >
        <img src="Images/exit.png" />
       
    </button>
     <script type="text/javascript">

     window.addEventListener("keypress", Jumb, false);
     function Jumb(e)
     {
        if(e.keyCode=="32")
        {
            //do logic here 
        }
        
     }
            function OnCollision()
            {
                var collide = new Audio('Sounds/collide.wav');
                // var collide = new Audio('explosion.wav');
                //if (playerWon === true) {
                collide.play();

            }

            function Start() {

             
                var beginMusic = new Audio('Sounds/Start.mp3');
                beginMusic.play();
                     start();
            }
            function Exit() {
                //Application.Quit();
                window.close();
            }
        </script>

</body>
</html>
